<template>
  <Popup
      :round="round"
      v-model="visible"
      @click-overlay="handleClose"
      :close-on-click-overlay="false"
      :safe-area-inset-bottom="true"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      :style="getStyle('popup')"
      :overlay-style="getStyle('overlay')"
  >
    <div class="layer_inside">
      <div class="dept" v-if="!!info&&!!(info['deptName'])" :style="getStyle('deptRoom')">
        <p class="roomName" v-if="!!(info['treatmentRoomName'])">{{ info['treatmentRoomName'] }}</p>
        <p class="deptName" v-if="!!showDeptInfo(1)">{{ showDeptInfo(1) }}</p>
        <p class="deptName" v-if="!!showDeptInfo(2)">{{ showDeptInfo(2) }}</p>
        <p class="deptName" v-if="!!showDeptInfo(4)">{{ showDeptInfo(4) }}</p>
      </div>
      <div class="patient-info">
        <div class="item patient-item current-patient" v-if="info['treatingAlert']">
          <div class="title" v-if="shownTitle(info,'current')" :style="getStyle('current')">
            {{ info?.current?.content || '当前检查' }}
          </div>
          <div class="first-group group" :class="getClassName('current')">
            <div class="content-item"
                 v-for="(patientItem,index) in chunkPatient(info['currPatient'])"
                 :key="index"
                 :class="`waitPatient-${patientItem?.length}`"
            >
              <template v-for="(item) in patientItem">
                <div class="wait-patient-info" :style="getStyle('currPatient')">
                  <span class="patient-orderNo" :style="getStyle('currentOrderNo')" v-if="!!(item.orderNo)">
                    {{ item.orderNo || ' ' }}
                  </span>
                  <span class="patient-name">
                    {{ item.patientName || ' ' }}
                  </span>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="item patient-item wait-patient" v-if="(info['waitingAlert'])&&(info['waitPatient']?.length)">
          <div class="title" v-if="shownTitle(info,'waiting')" :style="getStyle('waiting')">
            {{ info?.waiting?.content || '等待检查' }}
          </div>
          <div class="first-group group" :class="getClassName('wait')">
            <div class="content-item"
                 v-for="(patientItem,index) in chunkPatient(info['waitPatient'])"
                 :key="index"
                 :class="`waitPatient-${patientItem?.length}`"

            >
              <template v-for="(item) in patientItem">
                <div class="wait-patient-info" :style="getStyle('waitPatient')">
                  <span class="patient-orderNo" :style="getStyle('waitingOrderNo')" v-if="!!(item.orderNo)">
                    {{ item.orderNo || ' ' }}
                  </span>
                  <span class="patient-name">
                    {{ item.patientName || ' ' }}
                  </span>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';
import {pxToVw} from "@/utils/common";

export default {
  name: 'CallPatient',
  componentName: "CallPatient",
  props: {
    visible: {
      type: Boolean,
      required: false
    },
    info: {
      type: Object,
      required: true
    },
    checkList: {
      type: Array,
      required: true,
      default: () => {
        return Array()
      }
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
    }
  },

  computed: {
    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let {current, waiting, popupBackground, overlayBackground} = (self.info) || Array();
        let Obj = Object();
        switch (val) {
          case 'deptRoom':
            if (!!current && Reflect.has(current, 'backgroundColor')) {
              Reflect.set(Obj, 'backgroundColor', (current.patientNumberColor));
            }
            return Obj;
          case 'current':
            if (!!current && Reflect.has(current, 'backgroundColor')) {
              Reflect.set(Obj, 'backgroundColor', (current.backgroundColor));
            }
            if (!!current && Reflect.has(current, 'color')) {
              Reflect.set(Obj, 'color', (current.color));
            }
            if (!!current && Reflect.has(current, 'fontSize')) {
              Reflect.set(Obj, 'fontSize', pxToVw(current.fontSize));
            }
            return Obj;
          case 'currentOrderNo':
            if (!!current && Reflect.has(current, 'patientNumberBackground')) {
              Reflect.set(Obj, 'background', (current.patientNumberBackground));
            }
            if (!!current && Reflect.has(current, 'patientNumberColor')) {
              Reflect.set(Obj, 'color', (current.patientNumberColor));
            }
            return Obj;
          case 'currPatient':
            if (!!current && Reflect.has(current, 'patientColor')) {
              Reflect.set(Obj, 'color', (current.patientColor) || 'rgba(0, 89, 179, 1)');
            }
            // if (!!current && Reflect.has(current, 'patientFontSize')) {
            //   Reflect.set(Obj, 'fontSize', pxToVw(current.patientFontSize || 106));
            // }
            return Obj;
          case 'waiting':
            if (!!waiting && Reflect.has(waiting, 'backgroundColor')) {
              Reflect.set(Obj, 'backgroundColor', (waiting.backgroundColor));
            }
            if (!!waiting && Reflect.has(waiting, 'color')) {
              Reflect.set(Obj, 'color', (waiting.color));
            }
            if (!!waiting && Reflect.has(waiting, 'fontSize')) {
              Reflect.set(Obj, 'fontSize', pxToVw(waiting.fontSize));
            }
            return Obj;
          case 'waitingOrderNo':
            if (!!waiting && Reflect.has(waiting, 'patientNumberBackground')) {
              Reflect.set(Obj, 'background', (waiting.patientNumberBackground));
            }
            if (!!waiting && Reflect.has(waiting, 'patientNumberColor')) {
              Reflect.set(Obj, 'color', (waiting.patientNumberColor));
            }
            return Obj;
          case 'waitPatient':
            if (!!waiting && Reflect.has(waiting, 'patientColor')) {
              Reflect.set(Obj, 'color', (waiting.patientColor) || 'rgba(299, 133, 2, 1)');
            }
            // if (!!waiting && Reflect.has(waiting, 'patientFontSize')) {
            //   Reflect.set(Obj, 'fontSize', pxToVw(waiting.patientFontSize || 106));
            // }
            return Obj;
          case 'popup':
            Reflect.set(Obj, 'backgroundColor', (popupBackground || `rgba(255, 255, 255, 1)`));
            return Obj;
          case 'overlay':
            Reflect.set(Obj, 'backgroundColor', (overlayBackground || `rgba(0, 0, 0, 0.6)`));
            return Obj;
        }
      }
    },

    // 科室&号别
    showDeptInfo() {
      return function (val) {
        const self = this;
        if (Array.isArray(self.checkList)) {
          if (!!(self.checkList?.length)) {
            let boolean = self.checkList.includes(val);
            if (boolean) {
              switch (val) {
                case 1:
                  return (self.info.deptName)
                case 2:
                  if (!!(self.info['currPatient'].length)) {
                    let key = self.info?.registerObjNameKey || 'registerObjName'
                    return self.info['currPatient'][key] || (self.info.registerObjName)
                  }
                  break;
                case 4:
                  if (!!(self.info['currPatient'].length)) {
                    let key = self.info?.workerName || 'workStationName';
                    return self.info['currPatient'][key] || (self.info.workStationName)
                  }
                  break;
              }
            } else {
              return false
            }
            return self.checkList.includes(val)
          } else {
            return false
          }
        } else {
          return false
        }
      }
    },

    // 通过数据设置高度
    getClassName() {
      return function (type) {
        let totals = 0;
        if (type === 'current') {
          totals = this.info?.currPatient?.length || 0;
        } else {
          totals = this.info?.waitPatient?.length || 0;
        }
        switch (totals) {
          case 1:
            return 'content-1';
          case 2:
            return 'content-2';
          case 3:
          case 4:
            return 'content-3';
          case 5:
          case 6:
            return 'content-5';
          default:
            return 'content-default'
        }
      }
    },

    chunkPatient() {
      return function (info = []) {
        let number = (info?.length) || 0;
        let arr = Array();
        let mergeArr = Array();
        switch (number) {
          case 1:
          case 2:
          case 3:
            return this.$lodash.chunk(info, 1)
          case 4:
            return this.$lodash.chunk(info, 2)
          case 5:
          case 6:
            arr = new Array(6 - number).fill({});
            mergeArr = [...info, ...arr];
            return this.$lodash.chunk(mergeArr, 2)
          case 7:
          case 8:
          case 9:
            arr = (new Array(9 - number).fill({}));
            mergeArr = [...info, ...arr];
            return this.$lodash.chunk(mergeArr, 3)
          case 10:
            arr = (new Array(12 - number).fill({}));
            mergeArr = [...info, ...arr];
            return this.$lodash.chunk(mergeArr, 3)
          default:
            arr = (new Array(2).fill({}));
            mergeArr = [...info, ...arr];
            return this.$lodash.chunk(mergeArr, 3)
        }
      }
    },


    //   判断字段的数值是false还是null
    shownTitle() {
      return function (info, type) {
        switch (type) {
          case 'current':
            if (info && !!(info.current) && (Reflect.has((info.current), 'display'))) {
              return (info.current.display)
            } else {
              return true
            }
          case 'waiting':
            if (info && !!(info.waiting) && (Reflect.has((info.waiting), 'display'))) {
              return (info.waiting.display)
            } else {
              return true
            }
        }

      }
    }
  },

  mounted() {
    // console.log('init')
  },

  methods: {
    handleClose() {
      console.log('关闭')
      this.$emit('handleCancel');
    }
  },
}
</script>

<style lang="scss" scoped>
@import "./assets/style";

.group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
